<template>
  <div>
    <el-dialog
      title="新增角色"
      :visible.sync="dialogFormVisibleUserAdd"
      :close-on-click-modal="false"
      @close="handleCloseUserAddClose"
    >
      <el-form
        ref="ruleFormUserAdd"
        :model="ruleFormUserAdd"
        :rules="rulesUserAdd"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="角色名称" prop="sysRoleName">
          <el-input v-model="ruleFormUserAdd.sysRoleName" />
        </el-form-item>
        <el-form-item label="角色类型" prop="sysRoleType">
          <el-radio-group v-model="ruleFormUserAdd.sysRoleType">
            <el-radio disabled="disabledAdminRoleButtonBoolean" :label="0">管理员</el-radio>
            <el-radio :label="1">普通管理员</el-radio>
            <el-radio :label="2">员工</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="状态" prop="flag">
          <el-radio-group v-model="ruleFormUserAdd.flag">
            <el-radio :label="0">启用</el-radio>
            <el-radio :label="1">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="ruleFormUserAdd.remark" type="textarea" placeholder="" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :loading="loadingAddRole" @click="submitFormUserAdd('ruleFormUserAdd')">提交</el-button>
          <el-button @click="resetFormUserAdd('ruleFormUserAdd')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { success } from '@/utils/tip'
import { roleAdd } from '@/api/momo/SysEnterprise'
import { disabledAdminRoleButton } from '@/api/momo/SysRole.js'
export default {
  name: 'RoleAdd',
  props: {
    roleAddToChild: {}
  },
  data() {
    return {
      loadingAddRole: false,
      dialogFormVisibleUserAdd: false,
      disabledAdminRoleButtonBoolean: true,
      ruleFormUserAdd: {
        enterpriseUuid: '',
        sysRoleName: '',
        remark: '',
        sysRoleType: 2,
        flag: 0
      },
      rulesUserAdd: {
        sysRoleName: [
          { required: true, message: '角色名必填', trigger: 'blur' }
        ]

      }
    }
  },
  watch: {
    roleAddToChild: {
      deep: true,
      immediate: false,
      handler() {
        const data = JSON.parse(JSON.stringify(this.roleAddToChild))
        this.dialogFormVisibleUserAdd = true
        this.ruleFormUserAdd.enterpriseUuid = data.enterpriseUuid
        this.handleDisabledAdminRoleButton()
      }
    }
  },
  methods: {
    submitFormUserAdd(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loadingAddRole = true
          roleAdd(this.ruleFormUserAdd).then(res => {
            res = res.data
            this.dialogFormVisibleUserAdd = false
            success(res)
            this.loadingAddRole = false
            this.$emit('roleAddToFather', '我是孩子')
            this.ruleFormUserAdd.remark = ''
            this.resetFormUserAdd('ruleFormUserAdd')
          }).catch(errorEd => {
            this.loadingAddRole = false
          })
        } else {
          this.loadingAddRole = false
          console.log('error submit!!')
          return false
        }
      })
    },
    resetFormUserAdd(formName) {
      this.ruleFormUserAdd.remark = ''
      this.$refs[formName].resetFields()
    },
    handleCloseUserAdd() {
      // this.dialogFormVisibleUserAdd = false
      // this.$emit('userAddToFather', '我是孩子')
    },
    handleCloseUserAddClose() {
      // this.dialogFormVisibleUserAdd = false
      // this.$emit('userAddToFather', '我是孩子')
    },
    handleDisabledAdminRoleButton() {
      disabledAdminRoleButton().then(res => {
        res = res.data
        this.disabledAdminRoleButtonBoolean = res
      })
    }
  }
}
</script>

<style scoped>

</style>
